<template>
    <div>
        <Table
                :ref="refs"
                :columns="columnsList"
                :data="tableData"
                highlight-row
                border
        ></Table>
    </div>
</template>

<script>
    import Sortable from 'sortablejs';

    const editButton = (vm, h, currentRow, index) => {
        return h('Button', {
            props: {
                type: 'primary',
                loading: currentRow.saving
            },
            style: {
                margin: '0 5px'
            }
        }, '编辑');
    };
    const deleteButton = (vm, h, currentRow, index) => {
        return h('Poptip', {
            props: {
                confirm: true,
                title: '您确定要删除这条数据吗?',
                transfer: true
            },
            on: {
                'on-ok': () => {
                    currentRow.isDeleting = true;
                    vm.deleteRow(vm.deleteIndex(index), vm.successDel(vm, index), vm.failDel(vm, index));
                }
            }
        }, [
            h('Button', {
                style: {
                    margin: '0 5px'
                },
                props: {
                    type: 'error',
                    placement: 'top',
                    loading: currentRow.isDeleting
                }
            }, '删除')
        ]);
    };

    export default {
        name: 'DragableTable',
        props: {
            refs: String,
            columnsList: Array,
            tableData: Array,
            start: Function,
            end: Function,
            choose: Function
        },
        methods: {
            //
        },
        created() {
            this.columnsList.forEach(item => {
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = this.tableData[param.index];
                        if (item.handle.length === 2) {
                            return h('div', [
                                editButton(this, h, currentRowData, param.index),
                                deleteButton(this, h, currentRowData, param.index)
                            ]);
                        } else if (item.handle.length === 1) {
                            if (item.handle[0] === 'edit') {
                                return h('div', [
                                    editButton(this, h, currentRowData, param.index)
                                ]);
                            } else {
                                return h('div', [
                                    deleteButton(this, h, currentRowData, param.index)
                                ]);
                            }
                        }
                    };
                }
            });
        },

        mounted() {
            var el = this.$refs[this.refs].$children[1].$el.children[1];
            let vm = this;
            Sortable.create(el, {
                onStart: vm.start,
                onEnd: vm.end,
                onChoose: vm.choose
            });
        }
    };
</script>
